import React, { useEffect, useState } from 'react'
import { Button, Divider,Modal,message,Form,Input,Select,DatePicker } from 'antd';
import './detail.less'
import $axios from '../../../utils/axios';

///////////////////////////////////////
export default function Detail(props: any) {
    const [form] = Form.useForm()
    const {currentData,sendData} = props
    const [isData,setIsData] = useState(currentData)
    const [isModalOpen, setIsModalOpen] = useState(false)
    const [messageApi, contextHolder] = message.useMessage()
    const [isFalse,setIsfalse] = useState(false)
    const [AllChcsOrgan,setAllChcsOrgan] = useState<any[]>([])  //所有机构信息
    const [AllChcsService,setAllChcsService] = useState<any[]>([])   //所有服务包数据
    const [doctorTeam,setDoctorTeam] = useState()
    //当前服务数据
    const [curData, setCurData] = useState<any>([])
    const [detailVisible,setDetailVisible] = useState<any>(true)
    //对应的居民信息
    const [residentData, setResidentData] = useState<any>([])
    //服务信息
    const [serverData,setServerData] = useState<any>({})
    const [label,setLabel] = useState('')
    const getResidentInfo = () => {
        $axios({
            url: '/api/getAllBasicResidentBySearch',
            method: 'POST',
            data: {
                searchKey: currentData.rname
            }
        }).then(res => {
            console.log('居民信息', res.data);
            setResidentData(res.data[0])
        })
    }
    //获取签约信息
    const getSignById = ()=>{
        $axios({
            url: '/api/getSignById',
            method: 'POST',
            data: {
              id: currentData.id
            }
        }).then(res => {
            console.log('签约信息', res.data);
            setServerData(res.data)
            setLabel(changeLabelArr(res.data.labelArr)) 
        })
    }
    //获取机构信息
    const getAllChcsOrgan = ()=>{
        $axios({
        url:'/api/getAllChcsOrgan',
        method:'post',
        }).then((res)=>{
        // console.log(res.data.rows)
        const data = res.data.rows.map((item:any)=>{
            return {value:item.id,label:item.name} 
        })
        setAllChcsOrgan(data)
        })
    }
    //获取医生团队数据
  const getTeamByOrganId = (value:any)=>{
    $axios({
      url:'/api/getTeamByOrganId',
      method:'post',
      data:{
        organId:value
      }
    }).then((res)=>{
      console.log(res)
      const data = res.data.map((item:any)=>{
        return {value:item.id,label:item.name} 
      })
      setDoctorTeam(data)
    })
  }
  //获取服务包数据
  const getAllChcsService = ()=>{
    $axios({
      url:'/api/getAllChcsService',
      method:'post',
    }).then((res)=>{
      // console.log(res.data.rows)
      const data = res.data.rows.map((item:any)=>{
        return {value:item.name,label:item.name} 
      })
      setAllChcsService(data)
    })
  }
   //获取下拉框选择数据
   const handleChange = (value: string) => {
    console.log(value)
    if(value.length>20){
      getTeamByOrganId(value)
    }
  }
    //点击返回
    const onBack = ()=>{
      setDetailVisible(false)
    }
    //给父组件传值
    sendData({
      isFalse:!detailVisible
    })
    //更新标签
    const changeLabelArr  = (data:any)=>{
        return data.map((item:any,index:number)=>{
            return <span key={index}>
                {item.name}
            </span>
        })
    }
    //控制模态框
    const showModal = () => {
        setIsModalOpen(true)
        setIsfalse(false)
    }
    const showModal2 = ()=>{
        setIsModalOpen(true)
        setIsfalse(true)
    }
    //审核通过
    const handleOk = () => {
        setIsModalOpen(false)
        serverData.status=1
        messageApi.open({
            type: 'success',
            content:'审核成功',
        })
    }
    //驳回
    const handleok2 =()=>{
        setIsModalOpen(false)
        if(isFalse){
            messageApi.open({
                type: 'success',
                content:'驳回成功',
            })
            serverData.status=2
        }
    }
    //提醒支付
    const success = () => {
        messageApi.open({
          type: 'success',
          content:'提醒成功',
        });
    }
    //关闭模态框
    const handleCancel = () => {
        setIsModalOpen(false)
    }
    //点击编辑服务数据
    const edit = ()=>{
        setDetailVisible(false)
        setIsData(false)
    }
    //点击保存
    const save = ()=>{
        setDetailVisible(false)
        alert('保存成功!')
    }
    //驳回原因数据
    const onFinish = (values: any) => {
        console.log('Success:', values)
    }
    //获取年龄
    const getAge = (birthday: string | Date) => {
        return Math.floor((new Date().getTime() - new Date(birthday).getTime()) / 1000 / 60 / 60 / 24 / 365)
    }
    useEffect(() => {
        setCurData(currentData)
        getResidentInfo()
        getSignById()
        getAllChcsOrgan()
        getAllChcsService()
    }, [])
    ////////////////////////////////////
    return (
        <>
            {
               !isData.edit ? <div style={{ background: '#fff', padding: '20px' }}>
                    <h3>签约详情: <span style={{color:'red'}}>{serverData?.status==0?'待审核':serverData?.status==1?'待支付':serverData?.status==2?'已驳回':serverData?.status==3?'生效中':''}</span></h3>
                    <Divider />
                    <h3>居民信息</h3>
                    <div className='box'>
                        <div>姓名:<span style={{color:'#1677ff'}}>{residentData?.name}</span></div>
                        <div>身份证号:<span>{residentData?.IDCard}</span></div>
                        <div>性别:<span>{residentData?.gender ? '女' : '男'}</span></div>
                        <div>年龄:<span>{getAge(residentData?.birthday).toString()}</span></div>
                        <div>联系电话:<span>{residentData?.tel}</span></div>
                        <div>现居地:<span>{residentData?.address}</span></div>
                        <div>居民标签:{label}</div>
                    </div>
                    <Divider />
                    <h3>签约信息</h3>
                    <div className='box'>
                        <div>签约编号:<span>{serverData?.number}</span></div><div>签约状态:<span>{serverData?.status==0?'待审核':serverData?.status==1?'待支付':serverData?.status==2?'已驳回':serverData?.status==3?'生效中':''}</span></div>
                        <div>签约机构:<span>{serverData?.organ?.name}</span></div><div>签约团队:<span>{serverData?.team?.name}</span></div>
                        <div>签约医生:<span>{serverData?.doctor?.name}</span></div><div>服务包:<span>{serverData?.service?.name}</span></div>
                        <div>签约周期:<span>{serverData?.service?.period+'年'}</span></div><div>费用:<span>{'¥'+serverData?.service?.price}</span></div>
                        <div>签约类型:<span>{serverData?.type}</span></div><div>申请时间:<span>{serverData?.subscribeTime}</span></div>
                        <div>生效日期:<span>{serverData?.takingEffectTime}</span></div><div>签约备注:<span>{serverData?.notes}</span></div>
                    </div>
                    <Divider />
                    {
                    serverData.status<2 ? <div className='btnTips'>
                        <Button type="primary" onClick={edit}>编辑服务信息</Button>
                        <Button type="primary" style={{background:'#3dd4a7'}} onClick={serverData.status==0?showModal:success}>
                            {serverData.status==0?'审核通过':serverData.status==1?'提醒支付':''}
                        </Button>
                        {serverData.status==0 && <Button type="primary" 
                        style={{background:'#fa746b'}} onClick={showModal2}
                        >
                            驳回
                        </Button>}
                        <Button onClick={onBack}>返回</Button>
                    </div>
                    :
                    serverData.status>=2? <Button onClick={onBack}>返回</Button>
                    : ''
                    }
                    {contextHolder}
                    <Modal title={serverData.status==0?'审核通过':isFalse?'驳回确认':''} open={isModalOpen}
                    onOk={!isFalse?handleOk:handleok2} onCancel={handleCancel}>
                        <p>确定要审核通过吗？</p>
                        
                        {
                            isFalse && <Form onFinish={onFinish}>
                                <Form.Item
                                    label="驳回原因"
                                    name="rejection"
                                    rules={[{ required: true, message: '请输入驳回原因~' }]}
                                    >
                                    <Input />
                                </Form.Item>
                            </Form>
                        }
                    </Modal>
                </div>
                :
                <div>
                    <h3>签约详情: <span style={{color:'red'}}>{serverData?.status==0?'待审核':serverData?.status==1?'待支付':serverData?.status==2?'已驳回':serverData?.status==3?'生效中':''}</span></h3>
                    <Divider />
                    <h3>居民信息</h3>
                    <Form form={form} style={{display:'flex',justifyContent:'start',alignItems:'center',flexWrap:'wrap'}}
                    >
                        <Form.Item className='tips' label="姓名" name='rname' rules={[{ required: true, message: '请填写姓名' }]}>
                            <Input placeholder={residentData?.name} style={{width:200}} disabled/>
                        </Form.Item>
                        <Form.Item className='tips' label="身份证号" name='IDCard' rules={[{ required: true, message: '请填写身份证号' }]}>
                            <Input style={{width:200}}/>
                        </Form.Item>
                        <Form.Item className='tips' label="性别" name='gender' rules={[{ required: true, message: '请填写性别' }]}>
                            <Select style={{width:200}} options={[{value:'0',label:'男'},{value:'1',label:'女'}]}/>
                        </Form.Item>
                        <Form.Item className='tips' label="出生年月" name='birthday' rules={[{ required: true, message: '请填写出生年月' }]}>
                            <DatePicker/>
                        </Form.Item>
                        <Form.Item className='tips' label="联系电话" name='tel' rules={[{ required: true, message: '请填写联系电话' }]}>
                            <Input style={{width:200}}/>
                        </Form.Item>
                        <Form.Item className='tips' label="现居地" name='address' rules={[{ required: false}]}>
                            <Input style={{width:200}}/>
                        </Form.Item>
                        <Form.Item className='tips' label="居民标签" name='label' rules={[{ required: false}]}>
                            <Select style={{width:200}} />
                        </Form.Item>
                    </Form>
                    <Divider />
                    <h3>签约信息</h3>
                    <Form form={form} style={{display:'flex',justifyContent:'start',alignItems:'center',flexWrap:'wrap'}}
                    >
                        <Form.Item className='tips' label="签约编号" name='id' rules={[{ required: false}]}>
                            <span>{serverData?.number}</span>
                            {/* <Input value={serverData?.number} style={{width:200}}/> */}
                        </Form.Item>
                        <Form.Item className='tips' label="签约状态" name='status' rules={[{ required: false}]}>
                            <span>{serverData?.status==0?'待审核':serverData?.status==1?'待支付':serverData?.status==2?'已驳回':serverData?.status==3?'生效中':''}</span>
                        </Form.Item>
                        <Form.Item className='tips' label="签约机构" name='gender' rules={[{ required: true, message: '请填写签约机构' }]}>
                            <Select style={{width:200}} onChange={handleChange} options={AllChcsOrgan}/>
                        </Form.Item>
                        <Form.Item className='tips' label="签约团队" name='team' rules={[{ required: true, message: '请填写签约团队' }]}>
                            <Select style={{width:200}} options={doctorTeam}/>
                        </Form.Item>
                        <Form.Item className='tips' label="服务包" name='service' rules={[{ required: true, message: '请填写服务包' }]}>
                            <Select style={{width:200}} options={AllChcsService}/>
                        </Form.Item>
                        <Form.Item className='tips' label="签约类型" name='type' rules={[{ required: false}]}>
                            <span>{serverData?.type}</span>
                        </Form.Item>
                        <Form.Item className='tips' label="签约周期" name='period' rules={[{ required: false}]}>
                            <span>{serverData?.service?.period+'年'}</span>
                        </Form.Item>
                        <Form.Item className='tips' label="费用" name='price' rules={[{ required: false}]}>
                            <span>{'¥'+serverData?.service?.price}</span>
                        </Form.Item>
                        <Form.Item className='tips' label="申请时间" name='price' rules={[{ required: false}]}>
                            <span>{serverData?.subscribeTime}</span>
                        </Form.Item>
                        <Form.Item className='tips' label="生效日期" name='takingEffectTime' rules={[{ required: true}]}>
                            <DatePicker/>
                        </Form.Item>
                        <Form.Item className='tips' label="签约备注" name='notes' rules={[{ required: false}]}>
                            <Input style={{width:300}}/>
                        </Form.Item>
                    </Form>
                    <div className='btnTips'>
                        <Button type="primary" onClick={save}>保存</Button>
                        <Button onClick={onBack}>返回</Button>
                    </div>
                </div>
 
            }
        </>
        
    )
}